/** 乌鲁木齐市简介**/
import React from 'react';
import { connect } from 'dva';
import { Icon, WhiteSpace, Flex } from 'antd-mobile';
import styles from './orgDetail.less';

class OrgDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenHeight: 0,//屏幕高度
      devicePixelRatio: 1,//设备像素比
      headBoxHeight: 0,//页面头部盒子的高度
    };
  }
  //== 生命周期 -- 组件将要加载
  componentWillMount() {
    this.setState({
      screenHeight: window.screen.height,
      devicePixelRatio: window.devicePixelRatio
    })
  }
  //== 生命周期 -- 页面渲染
  render() {
    const {screenHeight,devicePixelRatio,headBoxHeight} = this.state;
    return (
      <div className='orgDetail'>
        <div className={styles.orgDetailBox} style={{height:`${(screenHeight-62)*devicePixelRatio}px`}}>
          <div ref='detailHead' className={styles.headBox}>
            <Flex justify="start" align="center">
              <div className={styles.leftEmblemBox}>
                <Icon type={require('../../../../svgs/work/os/emblem1.svg')} size='lg' className={styles.leftEmblem} />
              </div>
              <div className={styles.rightTitleBox}>
                <b className={styles.rightTitle}>克拉玛依市网信党工委</b>
                <Flex justify="start" align="center">
                  <span className={styles.rightPhoneNumber}>0991&nbsp;2342345</span>
                  <Icon type={require('../../../../svgs/work/os/phone.svg')} className={styles.rightCallIcon} />
                </Flex>
              </div>
            </Flex>
          </div>
          <Flex justify='center' align='center' wrap='wrap' className={styles.contentBox} style={{height:`${(screenHeight-62)*devicePixelRatio-headBoxHeight}px`}}>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/website.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>网站数量</div>
            </div>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/user.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>网站主体</div>
            </div>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/emblem.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>互联网党委</div>
            </div>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/branch.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>互联网党支部</div>
            </div>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/team1.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>互联网党小组</div>
            </div>
            <div className={styles.contentTtemBox}>
              <Icon type={require('../../../../svgs/work/os/instructor.svg')} className={styles.contentIcon}/>
              <div className={styles.contentNumber}>12100</div>
              <div className={styles.contentTitle}>党建指导员</div>
            </div>
          </Flex>
        </div>
      </div>
    );
  }
  //== 生命周期 -- 组件加载完成
  componentDidMount() {
    this.setState({
      headBoxHeight: this.refs.detailHead.clientHeight+this.refs.detailHead.offsetTop*2,
    })
  }
}

function mapStateToProps({ infor }) {
  return {
    infor,
  };
}

export default connect(mapStateToProps)(OrgDetail);
